<script setup>
import {onMounted, reactive, ref} from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { computed } from 'vue';

const user = computed(() => {
    return JSON.parse(localStorage.getItem('user'));
});
const uid=user.uid
// 存储侧边栏数据的响应式对象
const asideData = ref([]);
// 存储底部“猜你喜欢”区域数据的响应式对象
const downData = ref([]);
getAll();
getGoods();
function getImagePath(imageName) {
    return  `/src/assets/goods/${imageName}`;
}

function getAll(){
  axios({
    method:"get",
    url:"http://localhost:8080/admin/goodtypelist",
  }).then((response)=>{
    asideData.value=response.data
    console.log(response.data)
  }).catch((error)=>{
    console.log(error);
  });
}

function getGoods(){

    axios({
        method:"get",
        url:"http://localhost:8080/admin/getGoodsList",

    }).then((response)=>{
        downData.value=response.data

    }).catch((error)=>{
        console.log(error);
    })
}
// 在组件挂载时调用获取数据的方法
onMounted(() => {
  getAll();

});

// 计算每行显示的数量
const itemsPerRow = 5;

// 计算每个商品项的宽度
const containerWidth = 1240; // 根据你的实际容器宽度调整
const itemWidth = containerWidth / itemsPerRow -2; // 减去一些间距

</script>

<template>
  <div class="up">
    <el-aside width="180px"
              style="background-color: #f5f5f5;
                           margin: 20px 20px;
                           border-radius: 20px;
                           "  >
      <ul class="list_ul">
        <li v-for="item in asideData" :key="item.gtid">
          <el-icon><Paperclip /></el-icon>
          {{ item.gtname }}
        </li>
      </ul>
    </el-aside>
    <el-main>
      <el-row>
        <el-col :span="6.5">
          <a href="#">
            <img src="../assets/商品出售.jpg"
                 width="220"
                 style="border-radius: 20px;
                      margin-right: 35px"
            >
          </a>
        </el-col>
        <el-col :span="8.5">
          <ul class="goods_ul1">
            <li style="background-color: #EFE154">
              <div>
                <div style="margin-left: 23px;
                            margin-top: 15px;
                            font-size: 20px;
                            font-weight: normal;
                             ">手机
                </div>
                <img src="../assets/手机.png" width="70" style="margin-top: 15px;margin-left: 10px">
              </div>
              <div style="width: 280px;
                          height: 140px;
                          background-color: #fff;
                          margin-top: 5px;
                          margin-right: 5px;
                          border-radius: 20px;
                          ">

              </div>
            </li>
            <li style="background-color: #54efdd">
              <div>
                <div style="margin-left: 23px;
                            margin-top: 15px;
                            font-size: 20px;
                            font-weight: normal;
                             ">电脑
                </div>
                <img src="../assets/电脑.png" width="60" style="margin-top: 15px;margin-left: 10px">
              </div>
              <div style="width: 280px;
                          height: 140px;
                          background-color: #fff;
                          margin-top: 5px;
                          margin-right: 5px;
                          border-radius: 20px;
                          ">

              </div>
            </li>
          </ul>
        </el-col>
        <el-col :span="8.5">
          <ul class="goods_ul2">
            <li style="background-color: #b6ef54">
              <div>
                <div style="margin-left: 23px;
                            margin-top: 15px;
                            font-size: 20px;
                            font-weight: normal;
                             ">相机
                </div>
                <img src="../assets/相机.png" width="60" style="margin-top: 35px;margin-left: 10px">
              </div>
              <div style="width: 280px;
                          height: 140px;
                          background-color: #fff;
                          margin-top: 5px;
                          margin-right: 5px;
                          border-radius: 20px;
                          ">

              </div>
            </li>
            <li style="background-color: #da96ee">
              <div>
                <div style="margin-left: 23px;
                            margin-top: 15px;
                            font-size: 20px;
                            font-weight: normal;
                             ">键盘
                </div>
                <img src="../assets/键盘.png" width="75" style="margin-top: 25px;margin-left: 10px">
              </div>
              <div style="width: 280px;
                          height: 140px;
                          background-color: #fff;
                          margin-top: 5px;
                          margin-right: 5px;
                          border-radius: 20px;
                          ">

              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-main>
  </div>
  <div class="down">
    <div style="margin-top:20px;
                margin-left: 20px;
                padding-top: 10px;

                ">猜你喜欢</div>
    <div class="container">
      <ul class="goods_ul3">

          <li v-for="(item,index) in downData" :key="index" :style="{width:itemWidth+'px'}">
              <img :src="getImagePath(item.gimage)" alt="商品图片" style="height: 225px;width: 225px;border-radius: 20px;margin-top: 10px;margin-left: 10px" />
            <p style="width: 225px;margin: 10px 10px">{{ item.description }}</p>
            <p style="margin-top: 20px;font-size: 20px;margin-left: 20px">{{ item.price }}</p>
            <img :src="item.userAvater" alt="用户头像" style="width: 30px;height: 30px;border-radius: 50%;margin-top: 25px;margin-left: 5px">
            <span style="margin-left: 10px;margin-bottom: 100px">{{ item.sloginname }}</span>
          </li>

      </ul>
    </div>
  </div>
</template>

<style scoped>
.up{
  margin: 0 auto;
  background-color: #fff;
  width: 1300px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
.list_ul{
  margin-top: 25px;
  margin-bottom: 25px;
}
.list_ul li{
  margin-top: 15px;
  text-align: center;
}
.goods_ul2{
  margin-left: 30px;
}
.goods_ul1 li,.goods_ul2 li{
  width: 375px;
  height: 150px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
.goods_ul1 li:first-child,.goods_ul2 li:first-child{
  margin-top: 5px;
  margin-bottom: 25px;
}
.down{
  margin: 0 auto;
  margin-top: 20px;
  background-color: #fff;
  width: 1300px;
  border-radius: 20px;
}
.container {
  width: 1240px;
  margin: 0 auto;
}
.goods_ul3{

 /* margin: 20px auto;*/
 /* !* flex布局 *!*/
 /* display: flex;*/
 /* !* 换行 *!*/
 /*flex-wrap: nowrap;*/
 /* !* 水平方向两端对齐 *!*/
 /* justify-content: space-between;*/

    margin: 20px auto;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 水平方向两端对齐 */
    list-style-type: none; /* 去除默认的列表样式 */
    padding: 0;
}
.goods_ul3 li{
  //width: 245px;
  //height: 430px;
  /*background-color: #54efdd;*/
  /*border-radius: 20px;*/
  /*padding: 10px;*/
  /*margin-bottom: 10px;*/
  /*  width: calc(100%/5 - 40px); !* 假设你希望每行显示5个元素，每个元素的宽度为20%，并减去外边距 *!*/

  /*  box-sizing: border-box; !* 包括内边距和边框在元素的总宽度和高度内 *!*/
    width: calc((100% / 5) - 40px); /* 每行显示5个元素，每个元素的宽度为20%，并减去外边距 */
    flex:1px;
    margin: 10px; /* 添加外边距以确保元素之间有间隔 */
    box-sizing: border-box; /* 包括内边距和边框在元素的总宽度和高度内 */
}
.goods_ul3 span{
  margin-bottom: 20px;
}
</style>